<template>
	<view class="container">
		<navBar title="施工条件验收" @goBack="uni.navigateBack()"></navBar>
		

		<!-- #ifdef APP-PLUS || H5 -->
		<view class="conditional-acceptance-list" :style="{height: `calc(100% - ${systemInfo.navbarHeight || 0}px - ${systemInfo.stateHeight || 0}px - ${systemInfo.bottomHeight || 0}px)`}">
		<!-- #endif -->
		<!--  #ifdef MP-WEIXIN -->
		<view class="conditional-acceptance-list" :style="{height: `calc(100% - ${systemInfo.bottomHeight || 0}px)`}">
		<!-- #endif -->
			<view class="tab">
				<view @click="changeTabIndex(0)" :class="[tabIndex === 0 ? 'active' : '']">未完成</view>
				<view @click="changeTabIndex(1)" :class="[tabIndex === 1 ? 'active' : '']">已完成</view>
			</view>
			
			<view class="search-content">
				<view class="search">
					<u-icon name="search" color="#a7aebd" size="26"></u-icon>
					 <u--input @confirm="search" v-model="keyword" placeholder="请输入关键字" border="surround" clearable :customStyle="{border: 'none'}"></u--input>
				</view>
				<view @click="pickerShow = true" v-if="tabIndex === 0" class="option">
					<view>{{ currentTypeStr || '全部' }}</view>
					<u-icon name="arrow-down" color="#2f80ed" size="18"></u-icon>
				</view>
			</view>
			
			<scroll-view @scrolltolower="scrolltolower" class="scroll-view" scroll-y>
				<view>
					<view v-for="(item, index) in constructionPlanList" :key="index" class="item-content">
						<view class="title">
							<view :class="[stateClass(item.orderStatus)]" class="state">
								{{ stateStr[item.orderStatus] }}
							</view>
							<view class="text-overflow">{{ item.pmName }}</view>
						</view>
						<view class="date">
							<u-icon name="clock" color="#6a819e" size="14"></u-icon>
							<view class="date-text">开始时间：{{ item.constructionStartTime }} | {{ item.creatorUserName }}</view>
						</view>
						<view class="label">线路名称：{{ item.lineSiteName }}</view>
						<view class="label">区间站点：{{ item.siteName }}</view>
						<view class="label">现场带班负责人：{{ item.onSiteShiftLeaderName }}</view>
						<view class="btn-content">
							<view @click="checkProjectDetails(item)" class="gray">计划详情</view>
							<view @click="checkConditionalAcceptanceDetails(item)" class="blue">条件验收</view>
						</view>
					</view>
					<u-empty v-if="!constructionPlanList.length" mode="data" text="数据为空" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
				</view>
			</scroll-view>
		</view>	
		
		<u-picker :show="pickerShow" :columns="columns" keyName="label" @confirm="confirmPicker" @cancel="pickerShow = false"></u-picker>
	</view>
</template>

<script>
	import { getConstructionPlanList } from "@/api/conditionalAcceptance/constructionPlan.js"
	import { handleFormatDate } from "@/utils/date.js"
	import { getSystemHeightInfo } from "@/utils/common.js"
	export default {
		data() {
			return {
				tabIndex: 0,
				keyword: '',
				paging: {
					pageNum: 1,
					pageSize: 10,
					total: 0
				},
				constructionPlanList: [],
				pickerShow: false,
				columns: [
					[
						{ label: '全部', value: ['acceptance_status_not_started', 'acceptance_status_in_progress', 'acceptance_status_audit', 'acceptance_status_agree', 'acceptance_status_disagree'] },
						{ label: '未开始', value: ['acceptance_status_not_started'] },
						{ label: '进行中', value: ['acceptance_status_in_progress'] },
						{ label: '审核中', value: ['acceptance_status_audit'] },
						{ label: '待完善', value: ['acceptance_status_agree'] },
						{ label: '不通过', value: ['acceptance_status_disagree'] },
					]
				],
				stateStr: {
					'acceptance_status_not_started': '未开始',
					'acceptance_status_in_progress': '进行中',
					'acceptance_status_audit': '审核中',
					'acceptance_status_agree': '待完善',
					'acceptance_status_disagree': '不通过',
					'acceptance_status_completed': '已完成',
				},
				currentTypes: [],
				currentTypeStr: '',
				systemInfo: {},
				code: ''
			}
		},
		onLoad(options) {
			this.code = options.code
			this.currentTypes = this.columns[0][0].value
			this.currentTypeStr = this.columns[0][0].label
			this.systemInfo = getSystemHeightInfo()
		},
		onShow() {
			this.search()
		},
		methods: {
			changeTabIndex(index) {
				if (this.tabIndex === index) {
					return
				}
				this.tabIndex = index
				this.currentTypes = this.columns[0][0].value
				this.currentTypeStr = this.columns[0][0].label
				this.search()
			},
			scrolltolower() {
				if (this.paging.pageNum * this.paging.pageSize < this.paging.total) {
					this.paging.pageNum++
					this.getConstructionPlanArray()
				}
			},
			checkProjectDetails(data) {
				uni.navigateTo({ url: "/subpackage-enginner/pages/engineeringMaintenance/conditionalAcceptance/projectDetails?id=" + data.id })
			},
			checkConditionalAcceptanceDetails(data) {
				if (data.orderStatus !== 'acceptance_status_agree') {
					const type = this.stateStr[data.orderStatus] === '未开始' ? 1 : this.stateStr[data.orderStatus] === '进行中' ? 2 : this.stateStr[data.orderStatus] === '审核中' ? 3 : this.stateStr[data.orderStatus] === '不通过' ? 4 : this.stateStr[data.orderStatus] === '待完善' ? 5 : 6
					uni.navigateTo({ url: "/subpackage-enginner/pages/engineeringMaintenance/conditionalAcceptance/conditionalAcceptanceDetails?id=" + data.id + "&type=" + type })					
				} else {
					uni.navigateTo({ url: `/subpackage-enginner/pages/engineeringMaintenance/conditionalAcceptance/onditionalAcceptanceImage?state=1&type=3&id=${data.id}`})
				}
			},
			search() {
				this.constructionPlanList = []
				this.paging.pageNum = 1
				this.getConstructionPlanArray()
			},
			getConstructionPlanArray() {
				const { pageNum, pageSize } = this.paging
				getConstructionPlanList({
					currPage: pageNum,
					pageSize,
					params: {
						orderStatusList: this.tabIndex === 0 ? this.currentTypes : ['acceptance_status_completed'],
						keyword: this.keyword,
						code: this.code,
						projectId: uni.getStorageSync("isOwner"),
						state:1
					}
				}).then(res => {
					if (res && res.result && res.result.list) {
						this.constructionPlanList = this.constructionPlanList.concat(res.result.list.map(item => {
							const siteNames = []
							for (const item1 of item.lineSiteList) {
								for (const item2 of item1.list) {
									for (const item3 of item2.list) {
										siteNames.push(item3.name)
									}
								}
							}
							return {
								...item,
								constructionStartTime: item.constructionStartTime ? handleFormatDate(new Date(item.constructionStartTime), 3) : '',
								lineSiteName: item.lineSiteList.map(item1 => item1.name).join("、"),
								siteName: siteNames.join("、")
							}
						}))
						this.paging.total = res.result.total
					}
				})
			},
			confirmPicker(event) {
				this.pickerShow = false
				this.currentTypes = event.value[0].value
				this.currentTypeStr = event.value[0].label
				this.search()
			},
			stateClass(state) {
				if (this.stateStr[state] === '未开始') {
					return 'gray'
				}
				else if (this.stateStr[state] === '进行中') {
					return 'blue'
				}
				else if (this.stateStr[state] === '审核中') {
					return 'orange'
				}
				else if (this.stateStr[state] === '待完善') {
					return 'light-blue'
				}
				else if (this.stateStr[state] === '不通过') {
					return 'red'
				}
				else if (this.stateStr[state] === '已完成') {
					return 'green'
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		box-sizing: border-box;
		height: 100vh;
		overflow: hidden;
		/* #ifdef MP-WEIXIN */
		padding-top: 200rpx;
		/* #endif */
	}
	.conditional-acceptance-list {
		box-sizing: border-box;
		border-top: 15px solid #f5f7fa;
		background: #fff;
		font-size: 16px;
		height: 100%;
		.text-overflow {
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
		.tab {
			line-height: 53px;
			color: #445469;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 18px;
			font-weight: 500;
			> view {
				border-bottom: 1px solid #f5f7fa;
				flex: 1;
			}
			.active {
				color: #2f80ed;
				border-color: #2f80ed;
			}
		}
		.search-content {
			height: 69px;
			padding: 0 8px 0 14px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.search {
				display: flex;
				align-items: center;
				background: #f5f7fa;
				border-radius: 25px;
				margin-right: 6px;
				padding: 10px 12px;
				box-sizing: border-box;
				height: 44px;
				line-height: 44px;
				flex: 1;
			}
			.option {
				height: 44px;
				line-height: 44px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #f5f7fa;
				border-radius: 25px;
				width: 100px;
				box-sizing: border-box;
				padding: 0 14px;
				flex-shrink: 0;
				white-space: nowrap;
				view {
					color: #2f80ed;
				}
				
			}
		}
		.scroll-view {
			height: calc(100% - 15px - 54px - 69px);
			border-top: 12px solid #f5f7fa;
			box-sizing: border-box;
			padding: 0 14px;
			.item-content {
				// height: 202px;
				height: 231px;
				padding: 14px 12px 14px;
				border-bottom: 1px solid #E3E5E8;
				box-sizing: border-box;
				.title {
					height: 28px;
					line-height: 28px;
					display: flex;
					align-items: center;
					.state {
						border-radius: 0 4px 0 4px;
						font-weight: bold;
						padding: 0 4px;
						line-height: 22px;
						margin-right: 12px;
						flex-shrink: 0;
						color: #fff;
						font-size: 14px;
						&.gray {
							background: #e7ebf1;
							color: #434f60
						}
						&.blue {
							background: #4c75da
						}
						&.orange {
							background: #ff8a2c;
						}
						&.light-blue {
							background: #00a7e4;
						}
						&.red {
							background: #e84a4a;
						}
						&.green {
							background: #45c552;
						}
					}
					.text-overflow {
						flex: 1;
						color: #445469;
						font-weight: bold;
					}
				}
				.date {
					height: 20px;
					line-height: 20px;
					padding: 10px 0 9px;
					color: #6a819e;
					display: flex;
					font-size: 14px;
					align-items: center;
					.date-text {
						margin-left: 3px;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						width: calc(100% - 20px);
					}
				}
				.label {
					line-height: 29px;
					color: #6f747b;
					font-weight: bold;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					font-size: 14px;
				}
				.btn-content {
					display: flex;
					align-items: center;
					font-weight: 500;
					margin-top: 15px;
					text-align: center;
					font-size: 14px;
					> view {
						line-height: 34px;
						width: 100px;
						margin-right: 11px;
						border-radius: 50px;
					}
					.gray {
						color: #445469;
						background: #f5f7fa;
					}
					.blue {
						color: #fff;
						background: #2f80ed;
					}
				}
			}
		}
	}
</style>
